<template>
  <el-dialog v-model="dialogVisible" :title="title" width="360px">
    <el-form
        ref="ruleForm"
        :model="form"
        :rules="rules"
        label-width="80px"
        class="demo-ruleForm"
        status-icon
    >
      <el-form-item prop="comment" :label="labelComment">
        <textarea v-model="form.comment" style="height: 60px; width: 300px" placeholder=""></textarea>
      </el-form-item>
    </el-form>
    <template #footer>
              <span class="dialog-footer">
                <el-button type="primary" @click="confirmComment">{{ htmlContentBtAdd }}</el-button>
              </span>
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: 'Comment',
  data() {
    return {
      dialogVisible: false,
      title: chrome.i18n.getMessage("weirdCommentDialogTitle"),
      form: {
        comment: ''
      },
      rules: {
        comment: [
          { required: true, message: chrome.i18n.getMessage("weirdCommentDialogFormItemComment"), trigger: 'blur' }
        ]
      },
      labelComment: chrome.i18n.getMessage("weirdCommentDialogLabelComment"),
      htmlContentBtAdd: chrome.i18n.getMessage("commonBtnAdd")
    }
  },
  methods: {
    /**
     * 显示评论.
     */
    show() {
      this.form.comment = ''
      this.dialogVisible = true
    },
    confirmComment() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$emit('confirm', this.form.comment)
          this.dialogVisible = false
        }
      })
    }
  }
}
</script>

<style scoped>

</style>